<template>
  <div>
      <el-row>
        <el-col :span="6" class="bgc">
          <h1>18</h1>
          <h3>今日参加活动人次</h3>
          <div>
            <img :src="TuPian" alt="">
            <img :src="Tu" alt="">
          </div>
        </el-col>
        <el-col :span="6" class="bgc2">
          <h1>￥2330.00</h1>
          <h3>今日活动收入</h3>
          <div>
            <img :src="TuPian" alt="">
            <img :src="Tu2" alt="">
          </div>
        </el-col>
        <el-col :span="6" class="bgc3">
          <h1>18</h1>
          <h3>今日课程订单</h3>
          <div>
            <img :src="TuPian" alt="">
            <img :src="Tu3" alt="">
          </div>
        </el-col>
        <el-col :span="6" class="bgc4">
          <h1>￥2330.00</h1>
          <h3>今日课程订单收入</h3>
          <div>
            <img :src="TuPian" alt="">
            <img :src="Tu4" alt="">
          </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import Tu from './main/1/main-beijing-18-jianbiankuai1.png'
import Tu2 from './main/2/main-beijing-2330-jianbiankuai1.png'
import Tu3 from './main/3/main-beijing-18-jianbiankuai2.png'
import Tu4 from './main/4/main-beijing-2330-jianbiankuai2.png'
import TuPian from './main/1/main-beijing-18-jianbiantiao.png'
export default {
  data() {
    return {
      Tu: Tu,
      Tu2: Tu2,
      Tu3: Tu3,
      Tu4: Tu4,
      TuPian: TuPian
    }
  }
  // components: {
  //   Tu,
  //   TuPian
  // }
}
</script>

<style lang="less" scoped>
div{
  width: 100%;
  .el-row {
    margin-bottom: 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    &:last-child {
      margin-bottom: 0;
    }
    .bgc{
      width:300px;
      height: 150px;
      background: url('./main/1/main-beijing-18.png') no-repeat ;
      background-position: 100% 100%;
      
    }
    .bgc2{
      width:300px;
      height: 150px;
      background: url('./main/2/main-beijing-2330.png') no-repeat ;
      background-position: 100% 100%;
    }
    .bgc3{
      width:300px;
      height: 150px;
      background: url('./main/3/main-beijing-18-2.png') no-repeat ;
      background-position: 100% 100%;
    }
    .bgc4{
      width:300px;
      height: 150px;
      background: url('./main/4/main-beijing-2330-2.png') no-repeat ;
      background-position: 100% 100%;
    }
    .bgc, .bgc2, .bgc3, .bgc4 {
      h1{
        font-size: 20px;
        font-weight: 900;
        color: #fff;
        margin-right: 200px;
        margin-top: 30px;
      }
      h3{
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        margin-right: 100px;
        margin-top: 10px;
      }
    }
  }
}
</style>